<template>
  <div class="index">
    <!-- 搜索 -->
    <search></search>
    <!-- circular无缝轮播 indicator-dots轮播中的小圆点 -->
    <swiper indicator-dots autoplay circular class="swiper-go">
      <block v-for="(item,index) in imgArr" :key="index">
        <swiper-item>
          <image :src="item.image_src" class="slide-image" mode="aspectFill"></image>
        </swiper-item>
      </block>
    </swiper>
    <!-- 分类数据 -->
    <div class="memu">
      <div class="menu-img" v-for="(item,index) in menuArr" :key="index">
        <image :src="item.image_src" class="slide-image" mode='aspectFill'></image>
      </div>
    </div>
    <!-- 户外运动等商品导航 -->
    <div class="shop">
      <div v-for="(item,index) in firstPageList" :key="index">
        <!-- 标题 -->
        <div class="shop-title">
          <image :src="item.floor_title.image_src" mode='aspectFit'></image>
        </div>
        <!-- 内容 -->
        <div class="shop-cont">
          <div class="shop-cont-left">
            <image :src="item.product_list[0].image_src"></image>
          </div>
          <div class="shop-cont-right">
            <!-- 小程序提供的标签 block 是没有语义的 在标签中也不会生产 因为在vue中v-for和v-if不能同时使用 可以使用v-show -->
            <block v-for="(subitem,subindex) in item.product_list" :key="subindex">
            <image 
             :src="subitem.image_src"
             v-if="subindex>0"
             >
             </image>
             </block>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {swiperImg,firstCategory,firstBulidData} from '@/api'
import search from '@/components/search.vue'
export default {
  data() {
    return {
      /* 轮播图的图片数组 */
      imgArr: [],
      /* 分类菜单的图片数据 */
      menuArr: [],
      /* 首页楼层最外层数据 */
      firstPageList:[]
    }
  },
  /* 注册组件 */
  components: {
    search
  },
  mounted() {
    //我们微信的顶级对象是wx 不是window了
    //轮播图的请求
    /* wx.request({
      url: 'https://zhengzhicheng.cn/api/public/v1/home/swiperdata',
      success: (res) => {
        console.log(res)
        if (res.data.meta.status === 200) {

          console.log(this)
          this.imgArr = res.data.message
        }
      }
    }) */
    /* 自己封装的请求 通过promise */
    swiperImg()
    .then(res=>{
      if (res.data.meta.status === 200) {
          // console.log(this)
          this.imgArr = res.data.message
        }
    }),
    //分类菜单数据的请求
    firstCategory()
      .then(res=>{
        // console.log(res)
        /* 成功请求后的数据 */
        if (res.data.meta.status === 200) {
          // console.log(res)
          this.menuArr = res.data.message
        }
    })
      //首页楼层数据获取      
      firstBulidData()
        .then(res=>{
          console.log(res)
          if(res.data.meta.status === 200){
            this.firstPageList=res.data.message
          }
      })
  }
}
</script>

<style lang='scss' scoped>

.swiper-go {
  height: 340rpx;
}
.slide-image {
  width: 100%;
  height: 100%;
}
.memu {
  display: flex;
  justify-content: space-around;
  padding: 10rpx 0;
}
.menu-img {
  width: 128rpx;
  height: 140rpx;
}
.shop{
  &-title{
    background-color: pink;
    image{
      height: 88rpx;
    }
  }
  &-cont{
    display: flex;
    padding: 20rpx 16rpx;
    &-left{
      image{
        width: 282rpx;
        height: 386rpx;
     }
    }
    &-right{
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      margin-left:10rpx; 
      image{
        width: 208rpx;
        height: 186rpx;
        &:nth-of-type(odd){
          margin-right: 10rpx;
        }
      }
    }
  }
}
</style>


